<template>
	<view class="uni-margin-wrap">
		<swiper class="swiper" circular indicator-dots autoplay interval="1500" indicator-color="#c0c0c0" indicator-active-color="#dd524d">
			<swiper-item v-for="item in props.data" :key="item.id">
				<view class="swiper-item">
					<image :src="item.src" class="picture"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
const props = defineProps(['data']);
</script>

<style lang="scss">
.uni-margin-wrap {
	width: 100%;
	height: 400rpx;
	box-sizing: border-box;
	padding: 20rpx 0;
	.swiper {
		width: 100%;
		height: 100%;
		.swiper-item {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.picture {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
	}
}
</style>
